<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>大屏展示</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/stat.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/layuimini.css?v=2.0.4.2}" media="all">
    <link rel="stylesheet" th:href="@{/css/themes/default.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">

    <style>
        .PipeJoint{
            position: relative;
            width: 100%;
            height: 1200px;
            /* background-color: #00F7DE; */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-flow: row wrap;
        }


    </style>
</head>
<body>
<!-- 头部模块 -->
<div class="header">
    <ul class="left">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div class="title">
        <span>"U显"电脑配件库存管理系统统计大屏</span>
    </div>
    <ul class="right">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<!-- 主体模块 -->
<div class="main">
    <!-- 左侧模块 -->
    <div class="main-left">
        <!-- 完成率 -->
        <div class="completion">
            <div class="completion-content">
                <div class="rate">
                    <h5><span>销售额度</span></h5>
                    <p>67%</p>
                </div>
            </div>
        </div>
        <!-- 闪电 -->
        <div class="lightning">
            <div class="lightning1">
                <div class="sd1"></div>
                <div class="jd1">
                    <ul class="cd">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <div class="box1"></div>
                    <div class="box2"></div>
                </div>
            </div>
            <div class="lightning2">
                <div class="sd2"></div>
                <div class="jd2">
                    <ul class="cd">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <div class="box1"></div>
                    <div class="box2"></div>
                </div>
            </div>
        </div>
        <!-- top3 -->
        <div class="top3">
            <ul>
                <li>
                    <div class="title">NO.1</div>
                    <div class="content">
                        <p>57件</p>
                        <span>鼠标</span>
                    </div>
                </li>
                <li>
                    <div class="title">NO.2</div>
                    <div class="content">
                        <p>45件</p>
                        <span>键盘</span>
                    </div>
                </li>
                <li>
                    <div class="title">NO.3</div>
                    <div class="content">
                        <p>43件</p>
                        <span>显示器</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 中间模块 -->
    <div class="main-middle">
        <div class="external1"></div>
        <div class="external2"></div>
        <div class="external3"></div>
        <div class="external4"></div>
        <!-- 加载 -->
        <div class="jz1">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="jz2">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <!-- 内边框 -->
        <div class="inner1"></div>
        <div class="inner2"></div>
        <!-- 内加载箭头模块 -->
        <div class="arrow-l">
            <ol>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
        <div class="arrow-r">
            <ol>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
        <!-- 中间仪表图 -->
        <div class="meter"></div>
        <!-- 中间背景canvas -->
        <div class="animate"></div>
        <!-- 销售额 -->
        <div class="sale">
            <p><span>本月销售额</span></p>
            <p><span>233333 元</span></p>
        </div>
    </div>
    <!-- 右侧模块 -->
    <div class="main-right">
        <!-- 同比 -->
        <div class="compare">
            <div class="compare-content">
                <div class="rate2">
                    <h5><span>件数对比</span></h5>
                    <p>0.58</p>
                </div>
            </div>
        </div>
        <!-- 闪电 -->
        <div class="lightning">
            <div class="lightning3">
                <div class="jd3">
                    <ul class="cd">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <div class="box1"></div>
                    <div class="box2"></div>
                </div>
                <div class="sd3"></div>
            </div>
            <div class="lightning4">
                <div class="jd4">
                    <ul class="cd">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <div class="box1"></div>
                    <div class="box2"></div>
                </div>
                <div class="sd4"></div>
            </div>
        </div>
        <!-- top6 -->
        <div class="top6">
            <ul>
                <li>
                    <div class="title">NO.4</div>
                    <div class="content">
                        <p>38件</p>
                        <span>显卡</span>
                    </div>
                </li>
                <li>
                    <div class="title">NO.5</div>
                    <div class="content">
                        <p>32件</p>
                        <span>硬盘</span>
                    </div>
                </li>
                <li>
                    <div class="title">NO.6</div>
                    <div class="content">
                        <p>31件</p>
                        <span>主板</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<!-- 底部模块 -->
<div class="bottom">
    <div class="ul-box">
        <ul>
            <li>
                <div class="li-content">
                    <p><span>cpu销售额</span></p>
                    <p><span>5.5</span></p>
                    <div class="li-box">
                        <div class="box1">
                            <h5><span>周期</span></h5>
                            <div class="pic">
                                <img src="/images/stat/wc.png" alt="">
                                <span>0.4</span>
                            </div>
                        </div>
                        <div class="box2">
                            <h5><span>整机出售</span></h5>
                            <div class="pic">
                                <img src="/images/stat/zc.png" alt="">
                                <span>10</span>
                            </div>
                        </div>
                        <div class="box3">
                            <h5><span>数量</span></h5>
                            <div class="pic">
                                <img src="/images/stat/sq.png" alt="">
                                <span>12</span>
                            </div>
                        </div>
                        <div class="box4">
                            <h5><span>同比</span></h5>
                            <div class="pic">
                                <img src="/images/stat/tb.png" alt="">
                                <span>55.3%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="li-content">
                    <p><span>显卡销售额</span></p>
                    <p><span>20</span></p>
                    <div class="li-box">
                        <div class="box1">
                            <h5><span>周期</span></h5>
                            <div class="pic">
                                <img src="/images/stat/wc.png" alt="">
                                <span>0.37</span>
                            </div>
                        </div>
                        <div class="box2">
                            <h5><span>整机出售</span></h5>
                            <div class="pic">
                                <img src="/images/stat/zc.png" alt="">
                                <span>1</span>
                            </div>
                        </div>
                        <div class="box3">
                            <h5><span>数量</span></h5>
                            <div class="pic">
                                <img src="/images/stat/sq.png" alt="">
                                <span>11</span>
                            </div>
                        </div>
                        <div class="box4">
                            <h5><span>同比</span></h5>
                            <div class="pic">
                                <img src="/images/stat/tb.png" alt="">
                                <span>75.3%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="li-content">
                    <p><span>主板销售额</span></p>
                    <p><span>12.58</span></p>
                    <div class="li-box">
                        <div class="box1">
                            <h5><span>周期</span></h5>
                            <div class="pic">
                                <img src="/images/stat/wc.png" alt="">
                                <span>0.5</span>
                            </div>
                        </div>
                        <div class="box2">
                            <h5><span>整机出售</span></h5>
                            <div class="pic">
                                <img src="/images/stat/zc.png" alt="">
                                <span>10</span>
                            </div>
                        </div>
                        <div class="box3">
                            <h5><span>数量</span></h5>
                            <div class="pic">
                                <img src="/images/stat/sq.png" alt="">
                                <span>15</span>
                            </div>
                        </div>
                        <div class="box4">
                            <h5><span>同比</span></h5>
                            <div class="pic">
                                <img src="/images/stat/tb.png" alt="">
                                <span>95.3%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <ul>
            <li>
                <div class="li-content">
                    <p><span>电源销售额</span></p>
                    <p><span>2.5</span></p>
                    <div class="li-box">
                        <div class="box1">
                            <h5><span>周期</span></h5>
                            <div class="pic">
                                <img src="/images/stat/wc.png" alt="">
                                <span>1</span>
                            </div>
                        </div>
                        <div class="box2">
                            <h5><span>整机出售</span></h5>
                            <div class="pic">
                                <img src="/images/stat/zc.png" alt="">
                                <span>10</span>
                            </div>
                        </div>
                        <div class="box3">
                            <h5><span>数量</span></h5>
                            <div class="pic">
                                <img src="/images/stat/sq.png" alt="">
                                <span>30</span>
                            </div>
                        </div>
                        <div class="box4">
                            <h5><span>同比</span></h5>
                            <div class="pic">
                                <img src="/images/stat/tb.png" alt="">
                                <span>45.3%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="li-content">
                    <p><span>键盘销售额</span></p>
                    <p><span>6.59</span></p>
                    <div class="li-box">
                        <div class="box1">
                            <h5><span>周期</span></h5>
                            <div class="pic">
                                <img src="/images/stat/wc.png" alt="">
                                <span>2</span>
                            </div>
                        </div>
                        <div class="box2">
                            <h5><span>整机出售</span></h5>
                            <div class="pic">
                                <img src="/images/stat/zc.png" alt="">
                                <span>10</span>
                            </div>
                        </div>
                        <div class="box3">
                            <h5><span>数量</span></h5>
                            <div class="pic">
                                <img src="/images/stat/sq.png" alt="">
                                <span>60</span>
                            </div>
                        </div>
                        <div class="box4">
                            <h5><span>同比</span></h5>
                            <div class="pic">
                                <img src="/images/stat/tb.png" alt="">
                                <span>35.3%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="li-content">
                    <p><span>鼠标销售额</span></p>
                    <p><span>4.729</span></p>
                    <div class="li-box">
                        <div class="box1">
                            <h5><span>周期</span></h5>
                            <div class="pic">
                                <img src="/images/stat/wc.png" alt="">
                                <span>1.7</span>
                            </div>
                        </div>
                        <div class="box2">
                            <h5><span>整机出售</span></h5>
                            <div class="pic">
                                <img src="/images/stat/zc.png" alt="">
                                <span>20</span>
                            </div>
                        </div>
                        <div class="box3">
                            <h5><span>数量</span></h5>
                            <div class="pic">
                                <img src="/images/stat/sq.png" alt="">
                                <span>50</span>
                            </div>
                        </div>
                        <div class="box4">
                            <h5><span>同比</span></h5>
                            <div class="pic">
                                <img src="/images/stat/tb.png" alt="">
                                <span>25.3%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}" charset="utf-8"></script>
<script th:src="@{/js/lodash.min.js}" charset="utf-8"></script>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script th:inline="javascript">


</script>
</body>
</html>
<!--    欢迎您: <span th:text="${session.userInfo.chName}"></span>-->
